<template>
  <view class="picker-wrap">
    <view class="picker-top flex-wrap">
      <button type="default" class="btn cancel" @click="handleCancel">取消</button>
      <text class="flex-item"></text>
      <button type="default" class="btn confirm" @click="handleConfirm">确认</button>
    </view>
    <picker-view
        indicator-style="height: 50px;"
        @change="bindChange"
        class="picker-view">
      <picker-view-column>
        <view class="item" v-for="(item, index) in columns" :key="index">{{ item[valueKey] || item }}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据，使用ref
const value = ref([]);
const index = ref(0);

// 定义props
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  showToolbar: {
    type: Boolean,
    default: false
  },
  valueKey: {
    type: String,
    default: 'text'
  },
});

// 定义emit事件
const emit = defineEmits(['cancel', 'confirm']);

// 定义方法
const handleCancel = () => {
  emit('cancel');
};

const handleConfirm = () => {
  emit('confirm', props.columns[index.value].code, index.value);
};

const bindChange = (e) => {
  index.value = e.detail.value[0];
};
</script>

<style lang="scss" scoped>
.picker-view {
  width: 750rpx;
  height: 500rpx;
  margin-top: 20rpx;
}

.picker-top {
  padding: 0 10px;
}

.item {
  line-height: 100rpx;
  text-align: center;
}

.btn {
  background: #fff !important;

  &:after {
    display: none;
  }
}
uni-button[type=default]{
	color: #000 !important;
}
</style>